<template>
	<view>
		<view class="news_comments">
			<view class="list" v-for="(item,index) of newsReviersVo" :key="index">
			  <ul>
				<li class="one-row">
				  <view>
					<img
					  class="tx"
					  :src="item.customerHandImage"
					>
				  </view>
				  <view class="one-row-bottom">
					<p class="name">{{item.customerNickName}}</p>
					<p style="color: rgba(151, 149, 149, 100);font-size: 12px;">{{item.localReviersTime}}</p>
				  </view>
				</li>
				<li>
				  <view class="titleText">
					<p>{{item.localReviewsTitle}}/{{item.localReviewsText}}</p>
				  </view>
				</li>
				<li>
				  <view class="demo-contentImg" v-for="pic in item.pictureList">
					<image style="width: 10rem;height: 10rem;" fit="cover" :src="pic.localPictureUrl" mode=""></image>
				  </view>
				</li>
				<li>
				  <view class="demo-primary">
					<van-tag plain type="primary" style="padding: 0.15rem">石家庄同城</van-tag>
					<van-tag plain type="primary" style="padding: 0.15rem">#设计图纸#</van-tag>
				  </view>
				</li>
				<li>
				  <view class="demo-contento" style="text-align: right;padding-top: 0.4rem">
					<view class="demo-contento-chat" @click="huiFuSee(item.localReviewsId)">
					  <van-icon name="chat-o" />
					  <span class="demo-contento-chats" style="font-size: 0.8rem">{{item.localReviersReply}}</span>
					</view>
					<view class="demo-contento-like" @click="giveThumbsUp(item.localReviewsId,item.localFabulousStatus)">
					  <van-icon :name="item.localFabulousStatus==1?name1:name"/>
					  <span class="demo-contento-likes" style="font-size: 0.8rem">{{item.localReviersFabulous}}</span>
					</view>
				  </view>
				</li>
			  </ul>
			</view>
			
			    <!-- 自定义图标 -->
				<van-popup v-model="show" closeable close-icon="close" round  position="bottom" :style="{ height: '60%' }">
					<view class="wrapper" >
					<view class="block">
						<view class="block-top">
							<p>全部评论{{replyVoList.length}}条</p>
						</view>
						<view class="block-list">
							<view class="block-list-demo" v-for="item in replyVoList" :key="item.localReplyId">
								<img src="https://img.yzcdn.cn/vant/logo.png">
								<view class="list-demo-content">
									<view>
										<h3>{{item.customerNickName}}</h3>
										<p>{{item.localReplyTime}}</p>
									</view>
									<p style="width: 70%;font-size: 0.7rem">{{item.localReplyText}}</p>
								</view>
								<view class="block-list-like">
									<van-icon name="like-o"/>
									<span class="block-list-likes" style="font-size: 0.8rem">{{item.localReplyFabulous}}</span>
								</view>
							</view>
						</view>
						<view class="block-bottom">
							<van-cell-group >
								<van-field
								v-model="localReplyText"
								type="textarea"
								autosize
								left-icon="edit"
								placeholder="评论一下~"
								center
								>
									<van-button slot="button" size="small" type="primary" @click="insertLocalReply">
									发布</van-button>
								</van-field>
							</van-cell-group>
						</view>
					</view>
					</view>
				</van-popup>
				
		</view>
	</view>
</template>

<script>
	  import {Toast} from "vant";
	  import {
	    selectNewsReviersVo,
	    selectReplyVoByRevierwsId,
	    addLocalReply,
	    localFabulousJian,
	    localFabulousJia1,
	    localFabulousJia,
	  } from '../../api/customer/local.js';
	export default {
	  data () {
	    return {
	      name: 'like-o',
	      name1: 'like',
	      //评论过的消息集合
	      newsReviersVo:[
	      ],
	      //发布信息的id
	      localReviersId:'',
	      //回复的框
	      show:false,
	      //回复的列表
	      replyVoList:[
		  ],
	      //评论的内容
	      localReplyText:'',
	      //点赞中间表数据参数
	      localFabulous:{
	        localReviersId:'',
	        localFabulousStatus:'',
	      },
	
	    }
	  },
	  //页面渲染前自动加载
	  created(){
	    this.getSelectNewsReviersVo();
	  },
	  //方法
	  methods:{
	    //评论过的消息
	    getSelectNewsReviersVo(){
	      selectNewsReviersVo().then((res)=>{
	        this.newsReviersVo = res.data.data;
	       console.log(JSON.stringify(res));
	      })
	    },
	    //查看发布信息回复
	    huiFuSee(localReviewsId){
	      this.localReviersId = localReviewsId;
	      this.show = true;
	      selectReplyVoByRevierwsId(localReviewsId).then((res)=>{
	        this.replyVoList = res.data.data;
	       console.log(JSON.stringify(res));
	      })
	    },
	    // 发表评论
	    insertLocalReply(){
	      addLocalReply(this.localReviersId,this.localReplyText).then((res) =>{
	        console.log(res)
	        if(res.code == 500){
	          Toast("评论失败");
	        }else{
	          Toast("评论成功");
	          this.huiFuSee(this.localReviersId);
	          this.localReplyText = '';
	        }
	      })
	    },
	    // 点赞
	    giveThumbsUp(localReviewsId,localFabulousStatus){
	      this.localFabulous.localReviersId = localReviewsId;
	      console.log(localReviewsId,localFabulousStatus)
	      switch (localFabulousStatus) {
	        case 1:
	          this.localFabulous.localFabulousStatus = 0;
	          localFabulousJian(this.localFabulous).then((res)=>{
	            if (res.data.code==200){
	              this.getSelectNewsReviersVo();
	            }
	           console.log(JSON.stringify(res));
	          })
	          break
	        case 0:
	          this.localFabulous.localFabulousStatus = 1;
	          localFabulousJia1(this.localFabulous).then((res)=>{
	            if (res.data.code==200){
	              this.getSelectNewsReviersVo();
	            }
	           console.log(JSON.stringify(res));
	          })
	          break
	        default:
	          this.localFabulous.localFabulousStatus = 1;
	          localFabulousJia(this.localFabulous).then((res)=>{
	            if (res.data.code==200){
	              this.getSelectNewsReviersVo();
	            }
	            console.log(JSON.stringify(res));
	          })
	          break;
	      }
	    },
	
	
	  },
	
	}
</script>

<style>
	.news_comments {
  height: 100%;
  background-color: #f4f4f4;
}

.price {
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  text-align: left;
  margin-top: 5vw;
  font-family: SourceHanSansSC-bold;
}

.four-right {
  margin-left: 8px;
}

.spxq {
  color: rgba(91, 91, 91, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  -webkit-line-clamp: 3;
}

.four-row {
  margin: 10px 0;
  display: flex;
  align-items: unset;
}

.four-left img {
  width: 24vw;
  height: 24vw;
}

.three-img {
  margin-left: 2%;
}

.three-row img {
  margin-top: 3%;
}

.three-row {
  display: flex;
}

.three-row img {
  width: 24vw;
}

p {
  display: -webkit-box;
  /*-webkit-box-orient: vertical;*/
  /*-webkit-line-clamp: 2;*/
  overflow: hidden;
}

.two-row {
  margin-top: 8px;
  color: rgba(91, 91, 91, 100);
  font-size: 13px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.one-row-bottom {
  margin-left: 8px;
}

.list {
  width: 100%;
  overflow: hidden;
  padding: 10px 15px;
  box-sizing: border-box;
  background-color: #ffffff;
  margin: 10px 0;
}

.tx {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
}

.one-row {
  display: flex;
}

.name {
  color: rgba(104, 104, 103, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}
  .demo-contentImg{
    display: inline-block;
    margin: 0.1rem;
  }
  .titleText{
    text-align: left;
  }
 .demo-primary{
   float: left;
   padding: 0.5rem 0;
}
.demo-contento .demo-contento-chat{
  margin-top: 25px;
  display: inline-block;
  margin-right: 0.4rem;
}
.demo-contento .demo-contento-like{
  display: inline-block;
}


  .wrapper {
	    display: flex;
	    align-items: center;
	    justify-content:center;
	    height: 100%;
	    position: relative;
	    margin-bottom: 50px ;
	  }
	  .block {
	    width: 100%;
		height: 100%;
	    background-color: #fff;
	    bottom: 0;
	    position: absolute;
	    padding: 1rem 1rem 3.125rem 1rem;
	    overflow: auto;
	  }
	  .block .block-top{
	    padding-left: 1rem;
	    font-weight: 700;
	  }
	
	 .block-bottom{
		  width: 90%;
		  position: fixed;
		  z-index: 100;
		  bottom: 0rem;
		  background-color: #fff;
	  }
	
	  .block .block-list{
		padding-left:1rem;
		padding-top:1rem;
		font-size: 0.5rem;
		
	  }
	
	  .block .block-list .block-list-demo{
	    padding: 1rem 0;
	    position: relative;
	  }
	
	  .block .block-list .block-list-demo .block-list-demos{
	    margin-top: 0.5rem;
	    margin-left: 2.5rem;
	  }
	  .block .block-list .block-list-demo .block-list-demos .block-list-ademos{
	    padding-top: 0.5rem;
	  }
	  .block .block-list .block-list-demo .block-list-demos img{
	    width: 1rem;
	    height: 1rem;
	  }
	
	  .block .block-list .block-list-demo img{
	    flex-shrink: 0;
	    width: 2rem;
	    height: 2rem;
	    float: left;
	    margin: 0;
	  }
	  .block .block-list .list-demo-content{
	    margin-left: 0.5rem;
	    width: 70%;
	    display: inline-block;
	  }
	  .block .block-list .list-demo-content div{
	    padding-bottom: 0.5rem;
	  }
	  .block .block-list .list-demo-content div h3{
	    font-size: 0.75rem;
	  }
	  .block .block-list .list-demo-content div p{
	    font-size: 0.5rem;
	  }
	  .block .block-list .block-list-like{
	    display: inline-block;
	  }
	  .demo-contentImg{
	    display: inline-block;
	    margin: 0.07rem;
	  }
</style>
